<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./font/font_ztpsnsgjty/iconfont.css">
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script src="./js/page.js"></script>
    <script src="./js/flexible.js"></script>
</head>
<style>
    body{ background-color: rgb(239, 239, 239);}
    .box {
        width: 100%;
        height: 100%;
        max-width: 640px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: ghostwhite;
    }

    a {
        text-decoration: none;
        color: black;
    }

    ul li {
        margin-top: .213333rem
            /* 8/37.5 */
        ;
    }

    img {
        vertical-align: middle;
        border: 0;
    }

    .nav {
        height: 1.066667rem
            /* 40/37.5 */
        ;
        line-height: 1.066667rem
            /* 40/37.5 */
        ;
        text-align: center;
        font-size: .426667rem
            /* 16/37.5 */
        ;
    }

    .pic {
        cursor: pointer;
        width: 100%;
    }

    .tea {
        width: 100%;
        position: relative;
        display: inline-block;
        padding: 0 10px;
        font-size: .426667rem
            /* 16/37.5 */
        ;
        color: #008000;
        text-align: center;
        margin-top: .266667rem
            /* 10/37.5 */
        ;
    }

    .tea::after,
    .tea::before {
        content: '';
        position: absolute;
        top: 50%;
        width: 100px;
        height: 2px;
        background-color: #008000;
    }

    .tea::before {
        left: .533333rem
            /* 20/37.5 */
        ;
        transform: translateY(-50%);
    }

    .tea::after {
        right: .533333rem
            /* 20/37.5 */
        ;
        transform: translateY(-50%);
    }

    .list {
        flex-wrap: wrap;
        display: flex;
        justify-content: space-between;
        margin-bottom: 1.066667rem
            /* 40/37.5 */
        ;
    }

    .list .li {
        border: .026667rem
            /* 1/37.5 */
            solid green;
        width: 49%;
        cursor: pointer;
    }

    .smPic {
        width: 2.346667rem
            /* 88/37.5 */
        ;
        height: 2.346667rem
            /* 88/37.5 */
        ;
    }

    .listBox {
        margin-top: 20px;
    }

    .contentBox {
        display: flex;
        padding: 10px;
    }

    .text {
        display: flex;
        flex-direction: column;
        margin-left: 5px;
        align-items: center;
        justify-content: space-between;
    }

    .text>p {
        font-size: .32rem
            /* 12/37.5 */
        ;
    }

    .text .fuhao {
        font-size: .32rem
            /* 12/37.5 */
        ;
    }

    .text .price {
        font-size: .426667rem
            /* 16/37.5 */
        ;
    }

    .fotter {
        cursor: pointer;
        width: 100%;
        max-width: 640px;
        display: flex;
        position: fixed;
        bottom: 0;
        background-color: aliceblue;
    }

    .fotter>div {
        flex: 1;
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px;
        box-sizing: content-box;
    }

    .fotter>div p:nth-child(2) {
        font-size: 14px;
    }

    .color {
        color: green;
    }
    .box1 {
        width: 10rem
            /* 375/37.5 */
        ;
        margin: 0 auto;

        overflow: hidden;
        margin-top: .106667rem
            /* 4/37.5 */
        ;
        height: 1.066667rem
            /* 40/37.5 */
        ;
        line-height: 1.066667rem
            /* 40/37.5 */
        ;
        background-color: #fffbe8;
    }

    .box1 p {
        color: #ed6a0c;
    }

    .animate {
        line-height: 1.066667rem
            /* 40/37.5 */
        ;
        text-align: center;
        padding-left: 20px;
        font-size: .426667rem
            /* 16/37.5 */
        ;
        color: #000;
        display: inline-block;
        white-space: nowrap;
        animation: 30s wordsLoop linear infinite normal;
    }

    @keyframes wordsLoop {
        0% {
            transform: translateX(200px);
            -webkit-transform: translateX(200px);
        }

        100% {
            transform: translateX(-100%);
            -webkit-transform: translateX(-100%);
        }
    }

    @-webkit-keyframes wordsLoop {
        0% {
            transform: translateX(200px);
            -webkit-transform: translateX(200px);
        }

        100% {
            transform: translateX(-100%);
            -webkit-transform: translateX(-100%);
        }
    }
</style>

<body>
    <div class="box">
        <div class="nav">
            首页
        </div>
        <div class="topPic">
        </div>
        <div class="box1">
            <p class="animate">
                一杯香茶叶武夷山桐木关正山小种红茶4盒500克礼品袋 罐装明前金骏眉红茶浓香型;一杯香 茶叶 红茶 金骏眉买1送1共200克礼盒装 正宗武夷山桐木关金俊眉正山小种散装;一杯香茶叶 2018新茶明前龙井茶
                200克装茶叶明前绿茶散装浓香礼盒装
                ;一杯香茶叶安溪铁观音2018新茶4盒共500克礼盒装 正宗乌龙茶正宗春茶散装新茶上市;安吉白茶2018新茶明前春茶茶叶
                正宗安吉白茶2盒共200g一杯香茶叶绿茶珍稀黄金白茶散装礼盒装小罐;一杯香浓香型茉莉花茶买1送1共500g 2018新茶茶叶绿茶礼盒装广西横县福建散装花草茶
            </p>
        </div>
        <div class="tea">
            精选好茶
        </div>
        <div class="listBox">
            <ul class="list">

            </ul>
        </div>
        <div class="fotter">
            <div class="color first">
                <p class="iconfont icon-shouye"></p>
                <p>首页</p>
            </div>
            <div>
                <p class="iconfont icon-fenlei"></p>
                <p>分类</p>
            </div>
            <div>
                <p class="iconfont icon-gouwuche
                "></p>
                <p>购物车</p>
            </div>
            <div class="user">
                <a href="./entrypage.html"><p class="iconfont icon-wode1"></p>
                    <p>我</p></a>
            </div>
        </div>
    </div>
</body>

</html>